<template>
  <div class="wrapper">
    <van-tabs v-model="active">
      <van-tab title="低价转铺">
        <van-list class="clearfix">
            <van-cell :to="'/shopDetails/' + item.store_id"
                v-for="(item, index) in list1" v-if="index < 6"
                :key="index" :id="item.store_id" class="clearfix"
                >
                <img onerror="this.src='../../../assets/img/news.png'" v-lazy="imgs(item.store.store_images.split(',')[0])">
                <div class="list_li_div">
                    <div class="list_title">{{item.store.store_title}}</div>
                    <div>月租金：<span>{{item.store.store_money}}元</span>/月</div>
                    <div>面&nbsp;&nbsp;&nbsp;积：<span>{{item.store.store_area}}㎡</span></div>
                </div>
            </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="搜城优选">
        <van-list class="clearfix">
            <van-cell :to="'/shopDetails/' + item.store_id"
                v-for="(item, index) in list2" v-if="index < 6"
                :key="index" :id="item.store_id" class="clearfix"
                >
                <img onerror="this.src='../../../assets/img/news.png'" v-lazy="imgs(item.store.store_images.split(',')[0])">
                <div class="list_li_div">
                    <div class="list_title">{{item.store.store_title}}</div>
                    <div>月租金：<span>{{item.store.store_money}}元</span>/月</div>
                    <div>面&nbsp;&nbsp;&nbsp;积：<span>{{item.store.store_area}}㎡</span></div>
                </div>
            </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="餐饮专区">
        <van-list class="clearfix">
            <van-cell :to="'/shopDetails/' + item.store_id"
                v-for="(item, index) in list3" v-if="index < 6"
                :key="index" :id="item.store_id" class="clearfix"
                >
                <img onerror="this.src='../../../assets/img/news.png'" v-lazy="imgs(item.store.store_images.split(',')[0])">
                <div class="list_li_div">
                    <div class="list_title">{{item.store.store_title}}</div>
                    <div>月租金：<span>{{item.store.store_money}}元</span>/月</div>
                    <div>面&nbsp;&nbsp;&nbsp;积：<span>{{item.store.store_area}}㎡</span></div>
                </div>
            </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="最热旺铺">
        <van-list class="clearfix">
            <van-cell :to="'/shopDetails/' + item.store_id"
                v-for="(item, index) in list4" v-if="index < 6"
                :key="index" :id="item.store_id" class="clearfix"
                >
                <img onerror="this.src='../../../assets/img/news.png'" v-lazy="imgs(item.store.store_images.split(',')[0])">
                <div class="list_li_div">
                    <div class="list_title">{{item.store.store_title}}</div>
                    <div>月租金：<span>{{item.store.store_money}}元</span>/月</div>
                    <div>面&nbsp;&nbsp;&nbsp;积：<span>{{item.store.store_area}}㎡</span></div>
                </div>
            </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="最新上架铺">
        <van-list class="clearfix">
            <van-cell :to="'/shopDetails/' + item.store_id"
                v-for="(item, index) in list5" v-if="index < 6"
                :key="index" :id="item.store_id" class="clearfix"
                >
                <img onerror="this.src='../../../assets/img/news.png'" v-lazy="imgs(item.store.store_images.split(',')[0])">
                <div class="list_li_div">
                    <div class="list_title">{{item.store.store_title}}</div>
                    <div>月租金：<span>{{item.store.store_money}}元</span>/月</div>
                    <div>面&nbsp;&nbsp;&nbsp;积：<span>{{item.store.store_area}}㎡</span></div>
                </div>
            </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="更多" to="/viewShop/"></van-tab>
    </van-tabs>
    <router-link tag="div" :to="'/viewShop'" class="list_more">查看更多</router-link>
  </div>
</template>

<script>
export default {
  name: 'CompanyList',
  data () {
    return {
      active: 0,
      finished: false,
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      img: '~@/assets/img/home_switch_photo.png'
    }
  },
  mounted () {
    for (var i = 0; i < 5; i++) {
      let positionId = 3
      if (i === 0) {
        positionId = 3
      } else if (i === 1) {
        positionId = 4
      } else if (i === 2) {
        positionId = 5
      } else if (i === 3) {
        positionId = 6
      } else if (i === 4) {
        positionId = 28
      }
      this.postList(positionId)
    }
  },
  methods: {
    imgs (img) {
      let newStr = img.indexOf('http')
      if (newStr !== 0) {
        return this.baseUrl + img
      } else {
        return img
      }
    },
    tiao (id) {
      this.$router.push('/shopDetails/' + id)
    },
    postList (id) {
      let that = this
      this.$axios.post(process.env.API_HOST + '/api/advertisement/index', {
        // city: this.city,
        city: sessionStorage.getItem('Dcity'),
        position_id: id
      }).then(
        function (res) {
          if (res.data.code === 1) {
            if (id === 3) {
              that.list1 = res.data.data.lists
            } else if (id === 4) {
              that.list2 = res.data.data.lists
            } else if (id === 5) {
              that.list3 = res.data.data.lists
            } else if (id === 6) {
              that.list4 = res.data.data.lists
            } else if (id === 28) {
              that.list5 = res.data.data.lists
            }
          }
        }
      ).catch(error => console.log(error))
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.van-tabs
  /deep/ .van-tab--active
    font-size .36rem /* 18/50 */
    font-weight bold
.van-list
    width 100%
    padding 0px .4rem
.van-cell::after
  border:0px
.van-cell
    width 48%
    float left
    padding 0px
    box-shadow: 0px 0px 5px 0px rgba(4, 0, 0, 0.1)
    margin-top .3rem /* 15/50 */
    border-radius .1rem /* 5/50 */
    img
        width 100%
        height 2.68rem /* 134/50 */
        object-fit cover
        border-radius 5px 5px 0 0
    .list_li_div
        padding .3rem /* 15/50 */
        border-radius .1rem /* 5/50 */
        div
            width 100%
            color #666666
            line-height .24rem /* 12/50 */
            margin-bottom .2rem /* 10/50 */
            span
                color #F6360A
                font-weight 800
        .list_title
            line-height .4rem
            height .4rem
            font-size .3rem /* 15/50 */
            color #333
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
.van-cell:nth-child(odd)
    margin-right 4%
.list_more
    width 2.26rem /* 113/50 */
    height .62rem /* 31/50 */
    border-radius .3rem /* 15/50 */
    border 1px solid rgba(0,0,0,.5)
    font-size .34rem /* 17/50 */
    color #666
    text-align center
    line-height .62rem
    margin 0 auto
    margin-top .5rem /* 25/50 */
</style>
